<template>
  <div class="box">
    <div class="box1">
      <h2>当前求和为:{{sum}}</h2>
      <h4>组件描述：{{description}}</h4>
    </div>
    <div class="box2">
      <h4>当前求和放大10倍后：{{bigSum}}</h4>
      <h4>简短的描述：{{shortDescription}}</h4>
    </div>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementIfOdd(n)">当前求和为奇数</button>
    <button @click="incrementWait(n)">等一等0.5秒再加+</button>
    <button @click="incrementServer">请求服务器加多少</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' //map既有地图的意思也有映射的意思mapState即映射State
export default {
  name: 'Count',
  data() {
    return {
      n: 1,
    }
  },
  computed: {
    //如下代码是程序员亲自自己去编写的sum description这两个就算属性
    //   sum(){
    //       return this.$store.state.sum
    //   },
    //   description(){
    //       return this.$store.state.description
    //   },
    //mapState的第一种传参方式（对象）
    ...mapState({ sum: 'sum', description: 'description' }),
    //mapstate的第二种传参方式（数组）
    //...mapState(['sum','description']),
    //***************************************************//
    //   bigSum(){
    //       return this.$store.getters.bigSum
    //   },
    //   shortDescription(){
    //       return this.$store.getters.shortDescription
    //   }
    //mapGetters的第一种写法（对象）
    ...mapGetters({ bigSum: 'bigSum', shortDescription: 'shortDescription' }),
    // mapGetter的第二种写法（数组）
    // ...mapGetters(['bigSum','shortDescription'])
  },
  methods: {
    //    //加法运算
    //    //下面的功能是加法，但是没有啥业务逻辑，也就不需要有jia这个action了，可以直接通过commit触发mutations中的JIA
    //    increment(){
    //     this.$store.commit('JIA',this.n)
    //    },
    //减法运算
    //下面的功能是减法，但是没有啥业务逻辑，也就不需要有jian这个action了，可以直接通过commit触发mutations中的JIAN
    //    decrement(){
    //         this.$store.commit('JIAN',this.n)
    //    },
    //mapMutation第一种写法（对象写法），
    ...mapMutations({ increment: 'JIA', decrement: 'JIAN' }),
    //mapMutation的第二种写法（数组写法）模板中的increment,decrement,必须也要对应改成JIA，JIAN，
    //  ...mapMutations(['JIA','JIAN']),
    //奇数加
    //    incrementIfOdd(){
    //        this.$store.dispatch('jiaOdd',this.n)
    //    },
    //    //等等再加+
    //    incrementWait(){
    //        this.$store.dispatch('jiaWait',this.n)
    //    },
    //    //发送axios请求服务器加多少
    //    incrementServer(){
    //         this.$store.dispatch('jiaServer',this.n)
    //    }
    //mapActions 的第一种写法
    ...mapActions({
        incrementIfOdd:'jiaOdd',
        incrementWait:'jiaWait',
        incrementServer:'jiaServer',
    })
    //第二种写法（数组写法）模板中的incrementOdd要改成jiaOdd
    //incrementWait要改成jiaWait,incrementServer要改成jiaServer
    // ...mapActions(['jiaOdd','jiaWait','jiaServer'])
  },
  mounted() {
    console.log(this)
  },
}
</script>

<style scoped>
* {
  margin-left: 10px;
}
.box {
  background-color: pink;
  padding: 20px;
}
.box1 {
  background-color: skyblue;
  padding: 20px;
  margin-bottom: 10px;
}
.box2 {
  background-color: orange;
  padding: 20px;
}
</style>